<template>
  <div>
    <div>
      <el-page-header>
        <template #breadcrumb>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: 'adminhome' }">
              管理员
            </el-breadcrumb-item>
            <el-breadcrumb-item>统计数据</el-breadcrumb-item>
          </el-breadcrumb>
        </template>
      </el-page-header>
    </div>
    <br />
    <el-row :gutter="20">
      <!-- {{bbb[1].studentCount }} -->
      <el-col :span="4" v-for="list in bbb" :key="levelName" >
        <el-card class="box-card"  style="width: 100%;">
          <template #header >
            <div class="card-header">
              <span>{{ list.levelName }}</span>
              <el-button class="button" text>{{list.scoreRange}}</el-button>
            </div>
          </template>
          <div class="text item" style="font-size: 15px;">人数：{{list.studentCount}}</div><el-divider />
          <div class="text item" style="font-size: 15px;">比例：{{ list.percent }}%</div>
        </el-card>
      </el-col>
      <!-- <el-col :span="6">
        <el-card class="box-card" style="width: 100%;">
          <template #header>
            <div class="card-header">
              <span>优良学生数</span>
              <el-button class="button" text>分数区间：（75~100）</el-button>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="width: 100%;">
          <template #header>
            <div class="card-header">
              <span>中等学生数</span>
              <el-button class="button" text>分数区间：（50~75）</el-button>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="width: 100%;">
          <template #header>
            <div class="card-header">
              <span>差等学生数</span>
              <el-button class="button" text>分数区间：（25~50）</el-button>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="width: 100%;">
          <template #header>
            <div class="card-header">
              <span>极差学生数</span>
              <el-button class="button" text>分数区间：（0~25）</el-button>
            </div>
          </template>
        </el-card>
      </el-col> -->
    </el-row>
    <el-row>
      <el-col :span="12">
        <div ref="chartRef" style="width: 100%;height:300px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="chartRef2" style="width: 100%; height: 300px;"></div>
      </el-col>
    </el-row>
    <div>
      <el-row :gutter="16">
        <el-col :span="8">
          <div class="statistic-card">
            <el-statistic :value=tableData[0].maxScore>
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  最高分
                  <el-tooltip effect="dark" content="本条数据筛选范围包含所有参与本次实训的学生，包括大一到大四" placement="top">
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>较之上次：</span>
                <span class="green">
                  0%
                  <el-icon>
                    <CaretTop />
                  </el-icon>
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="statistic-card">
            <el-statistic :value=tableData[0].minScore>
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  最低分
                  <el-tooltip effect="dark" content="本条数据筛选范围包含所有参与本次实训的学生，包括大一到大四" placement="top">
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>较之上次：</span>
                <span class="red">
                  5%
                  <el-icon>
                    <CaretBottom />
                  </el-icon>
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="statistic-card">
            <el-statistic :value=tableData[0].avgScore>
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  平均分
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>较之上次(平均分取整)：</span>
                <span class="green">
                  8%
                  <el-icon>
                    <CaretTop />
                  </el-icon>
                </span>
              </div>
              <div class="footer-item">
                <el-icon :size="14">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, reactive } from 'vue'
import requests from '@/api/ajax.js'
import * as echarts from 'echarts';

/* 仓库初始化 */


/* 参数初始化 */
const bbb = ref([{
  studentCount: '',
  scoreRange: '',
  percent: '',
  levelName:'',
}])
const tableData = ref([{
  totalStudent: '',
  maxScore: '',
  minScore: '',
  avgScore: '',
}])
const chartRef = ref(null);/* 柱状图 */

myCreate();

async function myCreate(){
await getInfo();
}

// 请求能够发出组队邀请的学生信息
async function getInfo() {
  //请求能够发出组队邀请的学生信息
  await requests({ url: "/excel/AdmindataAnalysisTwo", method: "get", }).then(res => {
    if (res.code === 20041) {
      bbb.value = res.rdata
      console.log("count "+bbb.value[1].studentCount)
      console.log(res.rdata[1].studentCount)
    } else {
      alert('发生错误，请查看服务器问题')
    }
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });

  //请求能够发出组队邀请的学生信息
  await requests({ url: "/excel/AdmindataAnalysisOne", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    tableData.value = abc
    console.log("5.onbefore平均值");
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });

}




const aaa = [
  {
    classId: '1',
    className: 'RB软工互192',
    first: '10',
    second: '14',
    final: '6',
  },
  {
    classId: '2',
    className: 'RB软工互191',
    first: '5',
    second: '18',
    final: '8',
  },
]


onMounted(async() => {
  await getInfo();
  const myChart = echarts.init(chartRef.value);
let tData={
  a:'',
  b:'',
  c:'',
  d:'',
  e:'',
  k:'',
}
let tData1={
  f:'',
  g:'',
  h:'',
  i:'',
  j:'',
  m:'',
}
tData.a = bbb.value[0].studentCount;
tData.b = bbb.value[1].studentCount;
tData.c = bbb.value[2].studentCount;
tData.d = bbb.value[3].studentCount;
tData.e = bbb.value[4].studentCount;
tData.k = bbb.value[5].studentCount;

tData1.f = bbb.value[0].percent;
tData1.g = bbb.value[1].percent;
tData1.h = bbb.value[2].percent;
tData1.i = bbb.value[3].percent;
tData1.j = bbb.value[4].percent;
tData1.m = bbb.value[5].percent;

  // 指定图表的配置项和数据
  const option = {
    tooltip: {},
    legend: {
      data: ['人数','比例']
    },
    xAxis: {
      data: ['优秀', '良好', '差等', '极差', '及格', '不及格']
    },
    yAxis: {},

    series: [
      {
        name: '人数',
        type: 'bar',
        stack: '班级',
        itemStyle: {
          color: 'green'
        },
        data: [tData.a,tData.b,tData.c,tData.d,tData.e,tData.k],
        barGap: '20%',
        barCategoryGap: '40%'
      },
      {
        name: '比例',
        type: 'bar',
        stack: '班级',
        itemStyle: {
          color: 'blue'
        },
        data: [tData1.f,tData1.g,tData1.h,tData1.i,tData1.j,tData1.m],
        barGap: '20%',
        barCategoryGap: '40%'
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
})


//饼状图
const chartRef2 = ref(null);
/* let chart = null; */

onMounted(async() => {
  await getInfo();
  if (!chartRef.value) return;
  // 初始化echarts实例
  let chart = echarts.init(chartRef2.value);
  // const data = [
  //   { value: bbb.value[4].studentCount, name: '及格人数' },
  //   { value: bbb.value[5].studentCount, name: '不及格人数' }
  // ];
  const data =[]
let tData={
  value:'',
  name:'',
}
let tData1={
  value:'',
  name:'',
}
tData.value=bbb.value[4].studentCount;
tData.name='及格人数'
data.push(tData);
tData1.value=bbb.value[5].studentCount;
tData1.name='不及格人数'
data.push(tData1);
  let option = {
    title: {
      text: '成绩统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '成绩统计',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:data
      }
    ]
  };
// option.data=data
console.log(option)

chart.setOption(option);
});



</script>
  
<style>
/* 布局分块 */
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* 卡片样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}

/* 统计组件渲染 */
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}
</style>